<template>
    <!-- 头部 -->
    <div class="Head">
    <div  class="header">
        <!-- 头部左边 -->
        <div class="header_left">
            <router-link to=""><img :src="nav_head.location" alt="">{{nav_head.place}}</router-link>
        </div>
        <!-- 头部中间 -->
        <div class="header_center">
            <input type="text" :placeholder="nav_head.holder">
        </div>
        <!-- 头部右边 -->
        <div class="header_right">
            <router-link to=""><img :src="nav_head.ma" alt=""></router-link>
            <router-link to=""><img :src="nav_head.ling" alt=""></router-link>
        </div>
    </div>
    <div v-show="$route.path=='/discover'" class="Swiper">
        <swiper  class="swi" ref="mySwiper" :options="swiperOptions">
            <swiper-slide v-for="(value,index) in swi"><router-link to=""><img :src="value.img" alt=""></router-link></swiper-slide>
            <!--<div class="swiper-pagination" slot="pagination"></div>-->
        </swiper>
    </div>
        <div v-show="$route.path=='/destination'" class="top">
            <div>
                <span>{{nav_top.count}}</span>
                <div>
                    <div>
                        <span>{{nav_top.text1}}</span>
                        <span>{{nav_top.text2}}</span>
                    </div>
                    <div>{{nav_top.temperature}}</div>
                </div>
            </div>
        </div>
    </div>
</template>
<style lang="less" scoped>
    *{
        margin:0;
        padding: 0;
        list-style-type: none;
        text-decoration: none;
        box-sizing: border-box;
    }
    /* 头部 */
    .header {
        width: 100%;
        height: 1.333rem;
        background-color: #00CC99;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;
    img {
        width: 0.533rem;
        height: 0.666rem;
    }
    > div {
        display: flex;
        align-items: center;
    }
    /* 头部左边 */
    .header_left {
        flex: 1;
        justify-content: center;
        font-size: 0.373rem;
    > a {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        >img{
            width: 27%;
            height: 27%;
        }
    }
    }
    /* 头部中间 */
    .header_center {
        flex: 3;
        position: relative;
    > input {
        width: 100%;
        height: 0.8rem;
        font-size: 0.373rem;
        padding-left: 0.933rem;
        border-radius: 0.533rem;
        outline: none;
        border: 0.027rem solid #fff;
    }
    }
    /* 头部中间搜索小图标 */
    .header_center::after {
        content: "";
        width: 0.8rem;
        height: 0.8rem;
        background: url(../../public/img/serach.png) no-repeat 0.293rem 0.187rem;
        background-size: 0.426rem;
        position: absolute;
    }
    /* 头部右边 */
    .header_right {
        flex: 1;
        justify-content: center;
        >a{
            display: flex;
            justify-content: center;
            align-items: center;
            img{
                width: 55%;
                height: 55%;
            }
        }
    }
    }
    .Swiper{
        width: 100%;
        height: 200px;
        position: absolute;
        left: 0;
        top: 0;
    .swi{
        width: 100%;
        margin-top: 1.333rem;
        img{
            width: 100%;
            height: 100%;
        }
    }
    }
    .top {
        height: 4.531rem;
        background: url(../../public/img/tour5.png) no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-flow: column-reverse;
        color: #fff;
        padding: 0 0.533rem;
        position: absolute;
        left: 0;
        right: 0;
        margin-top: 1.119rem;
        > div {
            height: 2.265rem;
            display: flex;
            flex-flow: column;
            justify-content: space-around;
            font-size: 0.426rem;
            >span{
                display: flex;
                justify-content: flex-start;
            }
            > div {
                display: flex;
                justify-content: space-between;
                >div{
                    >span{
                        background-color: #00CC99;
                        font-size: 0.33rem;
                        margin-right: 0.267rem;
                    }
                }
            }
        }
    }
</style>
<script>
    export default {
        name: 'Header',
       data(){
            return{
                //  顶部搜索框
                nav_head:"",
                //  轮播
                swiperOptions: {
                    autoplay: true,
                    loop: true, //循环播放
                },
                nav_top:"",
                //  轮播图片
                swi:[],
            }
       },

        mounted(){
            this.$axios.get('http://118.178.85.166:3000/index').then((data)=>{
                //  全部数据
                let Data=data.data[0];
                //  顶部导航
                this.nav_head=JSON.parse(Data.nav_head);
                //  顶部图片背景
                this.nav_top=JSON.parse(Data.nav_Top);
                //  轮博图片
                this.swi=JSON.parse(Data.swi);
            }).catch((err)=>{
                console.log('这是header.vue中的错误:'+err);
            });

        },
    }
</script>